<script setup lang="ts">
// import PenkButton from "@/components/PenkButton/PenkButton.vue";
// import PenkFooter from "@/components/PenkFooter/PenkFooter.vue";
// import PenkForm from "@/components/PenkForm/PenkForm.vue";
// import PenkSearch from "@/components/PenkSearch/PenkSearch.vue";
// import PenkTable from "@/components/PenkTable/PenkTable.vue";
// import { reactive, getCurrentInstance, ref, onMounted } from "vue";
import { Delete, Edit, RefreshLeft } from "@element-plus/icons-vue";

const searchConfig: any = [
  {
    type: "select",
    label: "请选择用户类型",
    width: 150,
    prop: "userType",
    data: [
      { label: "游客", value: 1 },
      { label: "管理员", value: 2 },
    ],
  },
  {
    type: "input",
    label: "姓名",
    placeholder: "请输入姓名",
    width: 150,
    prop: "userName",
  },
  {
    type: "input",
    label: "邮箱",
    placeholder: "请输入邮箱",
    width: 150,
    prop: "email",
  },
  {
    type: "input",
    label: "手机",
    placeholder: "请输入手机",
    width: 150,
    prop: "phone",
  },
  {
    type: "select",
    label: "是否查找软删除",
    placeholder: "请选择",
    width: 150,
    prop: "paranoid",
    clearable: true,
    data: [
      {
        value: true,
        label: "是",
      },
      {
        value: false,
        label: "否",
      },
    ],
  },
];
const columnConfig: any = [
  {
    label: "用户类型",
    prop: "userType",
    render: function (value: any) {
      if (!value) return false;
      let temp: any = this.data.find((item: any) => item.value == value);
      if (temp) {
        return temp.label;
      } else {
        return value;
      }
    },
    data: [
      { label: "游客", value: 1 },
      { label: "管理员", value: 2 },
    ],
  },
  {
    label: "用户名",
    prop: "userName",
  },
  {
    label: "邮件",
    prop: "email",
  },
  {
    label: "手机",
    prop: "phone",
  },
  {
    label: "创建时间",
    prop: "createdAt",
  },
  {
    label: "更新时间",
    prop: "updatedAt",
  },
  {
    label: "删除时间",
    prop: "deletedAt",
  },
];
const formConfig: any = {
  formItemConfig: [
    {
      label: "用户类型",
      prop: "userType",
      type: "select",
      data: [
        { label: "游客", value: 1 },
        { label: "管理员", value: 2 },
      ],
      // Form item 局部 rules配置
      rules: {
        required: true,
        message: "请选择用户类型",
        trigger: "blur",
      },
    },
    {
      label: "用户名",
      prop: "userName",
      type: "input",
    },
    {
      label: "密码",
      prop: "passWord",
      type: "input",
    },
    {
      label: "手机",
      prop: "phone",
      type: "input",
    },
    {
      label: "邮箱",
      prop: "email",
      type: "input",
    },
    {
      label: "头像",
      prop: "url",
      type: "upload",
    },
  ],
  rules: {
    // 自定义校验
    userName: [
      {
        required: true,
        validator: (rule: any, value: any, callback: any) => {
          if (!value) {
            callback(new Error("请输入用户名"));
          }
          callback();
        },
        trigger: "blur",
      },
    ],
    // Form 全局 rules配置
    passWord: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
};

onMounted(() => {
  // 后置！为非空断言
  console.log(1111);
})

// 搜索框ref
const refPenkSearch = ref();
// 分页数据
const paginationData = reactive({
  total: 100,
  pageNum: 1,
  pageSize: 10,
});
const title = ref("新增");
const visible = ref(false);
let formData = reactive({});
// 表格数据
let tableData = reactive([
  {
    id: 16,
    userType: 89,
    userName: "penk",
    passWord: "as456852",
    email: null,
    phone: null,
    url: null,
    money: 0,
    createdAt: "2020-07-05T17:34:58.000Z",
    updatedAt: "2022-12-12T04:43:42.000Z",
    deletedAt: null,
    "userTypeFk.id": 89,
    "userTypeFk.typeName": "游客",
    enabled: true,
  },
  {
    id: 20,
    userType: 88,
    userName: "1111",
    passWord: "as456852",
    email: "1111",
    phone: "111",
    url: null,
    money: 0,
    createdAt: "2020-10-28T16:46:57.000Z",
    updatedAt: "2022-12-12T04:01:15.000Z",
    deletedAt: null,
    "userTypeFk.id": 88,
    "userTypeFk.typeName": "超级管理员",
    enabled: true,
  },
  {
    id: 19,
    userType: 88,
    userName: "111",
    passWord: "as456852",
    email: "11",
    phone: "111",
    url: null,
    money: 0,
    createdAt: "2020-10-28T16:46:49.000Z",
    updatedAt: "2022-12-12T04:01:14.000Z",
    deletedAt: null,
    "userTypeFk.id": 88,
    "userTypeFk.typeName": "超级管理员",
    enabled: true,
  },
  {
    id: 15,
    userType: 88,
    userName: "zyp",
    passWord: "as456852",
    email: "111",
    phone: "11",
    url: "",
    money: 0,
    createdAt: "2020-03-27T01:53:00.000Z",
    updatedAt: "2022-12-12T04:01:13.000Z",
    deletedAt: null,
    "userTypeFk.id": 88,
    "userTypeFk.typeName": "超级管理员",
    enabled: true,
  },
]);

// 获取列表
function getList() {
  let obj = {
    ...refPenkSearch.value.queryObj,
    pageNum: paginationData.pageNum,
    pageSize: paginationData.pageSize,
  };
  console.log(obj);
}

// 修改数据按钮
function handleEditItem(index: number, row: any) {
  visible.value = true;
  title.value = "编辑";
  // 防止数据冲突，所以要解构
  formData = reactive({ ...row });
}

// 添加数据按钮
function handleAddItem() {
  visible.value = true;
  title.value = "新增";
  formData = reactive({});
}

// 新增，编辑数据
function saveItem(form: any) {
  console.log(form);
}
</script>

<template>
  <PenkButton name="testBtn"></PenkButton>
  <!-- 头部搜索栏 -->
  <PenkSearch ref="refPenkSearch" :searchConfig="searchConfig">
    <el-button type="primary" @click="getList">搜索</el-button>
    <el-button @click="handleAddItem">新增</el-button>
  </PenkSearch>

  <!-- 表格 -->
  <PenkTable :table-data="tableData" :column-config="columnConfig" hasOpr>
    <template #default="{ scope }">
      <el-button v-if="!scope.row.deletedAt" type="primary" :icon="Edit" @click="handleEditItem(scope.$index, scope.row)">
      </el-button>
    </template>
  </PenkTable>

  <!-- 分页 -->
  <PenkFooter :total="paginationData.total" v-model:pageNum="paginationData.pageNum"
    v-model:pageSize="paginationData.pageSize" @change="getList"></PenkFooter>

  <!-- 表单弹框 -->
  <PenkForm :title="title" :formConfig="formConfig" :formData="formData" v-model:visible="visible" append-to-body
    @confirm="saveItem">
  </PenkForm>
</template>

<style scoped></style>
